<template>
    <div class="vehicle-basic">
        <el-form>
            <el-row class="basic-header">
                    <el-col :span="6">
                        <el-form-item label="车辆名称：" prop="input11819" class="label-center-align">
                            <el-input v-model="search.brand" type="text" clearable @input="searchExecute" placeholder="请输入搜索关键字"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="座位数：" prop="type" class="label-right-align" style="margin-left: 30px" >
                            <el-select-v2 :options="typeOptions" clearable v-model="search.type" placeholder="请选择座位数"
                                          @change="searchExecute"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="11">
                        <el-button type="success" plain @click="addVehicleClick">新增车辆</el-button>
                    </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" :header-cell-style="{textAlign: 'center'}"
                  :cell-style="{ textAlign: 'center' }" style="width: 100%" height="470">
            <el-table-column prop="id" label="编号" width="55" v-if="show" type="index"/>
            <el-table-column prop="licensePlate" label="车牌号"/>
            <el-table-column prop="brand" label="车辆名称"/>
<!--          <el-table-column label="样品" width="180" prop="vehicleImg">-->
<!--            <template  #default="scope">-->
<!--              <el-image style="width: 100px; height: 72px" :src="scope.row.vehicleImg"></el-image>-->
<!--            </template>-->
<!--          </el-table-column>-->
            <el-table-column prop="type" label="人数"/>
            <el-table-column prop="createTime" label="购置日期" width="180"/>
            <el-table-column label="车辆价值">
                <template #default="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.worth }}</span> 万元
                </template>
            </el-table-column>
            <el-table-column label="当前状态">
                <template #default="e">
                    <el-tag v-if="e.row.enabled === 0">可使用</el-tag>
                    <el-tag type="danger" v-if="e.row.enabled === 1">不可使用</el-tag>
                    <el-tag type="success" v-if="e.row.enabled === 2">使用中</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button @click="updateVehicleClick(scope.row)" type="danger" plain>修改</el-button>
                    <el-button @click="deleteVehicleClick(scope.row)" type="danger" plain>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="float: right;margin-top: 10px">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-size="paging.pageSize"
                           background
                           layout="total, prev, pager, next, jumper"
                           :total="paging.total"></el-pagination>
        </div>
    </div>
    <vehicle-basic-info-form ref="vehicleBasicFormRef" @refresh-data="carAll"/>
</template>


<script>
import {defineComponent, toRefs, reactive, getCurrentInstance, nextTick} from 'vue'
import {carAll, deletecar,} from "../../../../network/adm/vehicle";
import VehicleBasicInfoForm from "./form/VehicleBasicInfoForm.vue";

export default defineComponent({
    name: 'VehicleBasicInfo',
    data() {
        return {
            show: true,
            search: {
                brand: null,
                type: null,
            },
            paging: {
                pageNum: 1,
                pageSize: 8,
                total: 0
            },
            tableData: [],
            debounce: null
        }
    },
    methods: {
        searchExecute() {
            if(!this.debounce){//初始化防抖函数
                let carAll = this.carAll;
                this.debounce = this.$operate.debounce(function (){
                    carAll();
                },2000);
            }else{
                this.debounce();
            }
        },
        carAll() {
            let params = {
                brand: this.search.brand,
                type: this.search.type,
                pageNum: this.paging.pageNum,
                pageSize: this.paging.pageSize
            }
            carAll(params).then(data => {
                this.tableData = data.list;
                console.log("车辆信息：", data)
                this.paging.total = data.total;
            })
        },
        updateVehicleClick(row) {
            let frm = this.$refs.vehicleBasicFormRef;
            frm.type = 1;
            frm.dialogVisible = true;
            nextTick(function (){
                frm.setVehicle(row)
            })
        },
        addVehicleClick(){
            let frm = this.$refs.vehicleBasicFormRef;
            frm.type = 0;
            frm.dialogVisible = true;
        },
        deleteVehicleClick(row) {
          console.log('row',row)
            this.$operate.remove({
                title: "删除车辆",
                data: row.brand,
                executeFn: () => {
                    deletecar([row.id]).then(data => {
                        this.$response.handle({
                            data: data,
                            success: "删除成功",
                            successFn: () => {
                                this.carAll()
                            }
                        })
                    })
                }
            })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done()
                })
                .catch((_) => {
                })
        },
        handleSizeChange(val) {
            this.paging.pageSize = val;
        },
        handleCurrentChange(val) {
            this.paging.pageNum = val;
            this.carAll();
        },
    },
    components: {VehicleBasicInfoForm},
    props: {},
    setup() {
        const state = reactive({
            typeOptions: [
                {
                    "label": "2人坐",
                    "value": 2
                },
                {
                    "label": "4人坐",
                    "value": 4
                },
                {
                    "label": "5人坐",
                    "value": 5
                },
                {
                    "label": "10人座",
                    "value": 10
                },
            ],
        })
        const instance = getCurrentInstance()
        const submitForm = () => {
            instance.ctx.$refs['vForm'].validate(valid => {
                if (!valid) return
                //TODO: 提交表单
            })
        }
        const resetForm = () => {
            instance.ctx.$refs['vForm'].resetFields()
        }
        return {
            ...toRefs(state),
            submitForm,
            resetForm,
        }
    },
    created() {
        this.carAll()
    }
})

</script>

<style lang="scss">
*{
    //border: 1px solid red;
}
.vehicle-basic{
    height: 99%;
    background: white;
}
.basic-header>.el-col{
    height: 48px;
}
.basic-header{
    padding: 10px;
}
.el-select-dropdown__list {
    width: 245px;
}

.el-time-spinner__item {
    width: 100%;
}

.yongche {
    margin-left: 500px;
}

.el-select-dropdown__item {
    width: 100%;
}


.el-input-number.full-width-input,
.el-cascader.full-width-input {
    width: 100% !important;
}

.el-form-item--medium {
    .el-radio {
        line-height: 36px !important;
    }

    .el-rate {
        margin-top: 8px;
    }
}

.el-form-item--small {
    .el-radio {
        line-height: 32px !important;
    }

    .el-rate {
        margin-top: 6px;
    }
}

.el-form-item--mini {
    .el-radio {
        line-height: 28px !important;
    }

    .el-rate {
        margin-top: 4px;
    }
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
    table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;

        td.table-cell {
            display: table-cell;
            height: 36px;
            border: 1px solid #e1e2e3;
        }
    }
}

div.vehicle-basic {
}

.label-left-align ::v-deep .el-form-item__label {
    text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
    text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
    text-align: right;
}

.custom-label {
}

.static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    ::v-deep .el-divider--horizontal {
        margin: 0;
    }
}

</style>
